<!DOCTYPE html>
<html>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1" charset="UTF-8">
<link rel="stylesheet" type="text/css" href="gear.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.12/dist/css/bootstrap-select.min.css" />
<script src="gear.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.17/dist/js/bootstrap-select.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js" integrity="sha384-1CmrxMRARb6aLqgBO7yyAxTOQE2AKb9GfXnEo760AUcUmFx3ibVJJAzGytlQcNXd" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<title>Epic7 Gear's Substat</title>
<meta name="description" content="Epic7 Gear's Substat,calculate the score of gear's substats rolls">
<meta name="keywords" content="Epic7 Gear's Substat,e7 Gear's Substat,epic seven Gear's Substat,e7 Gear Rating Tool">
</head>

<body>
<div class="row">
<div class="col-12 col-sm-2 ">
    <div class="grid-label font-weight-bold" id="label-gear-lv">裝備等級</div>
    <select id="gear-lv" name="gear-lv" class="custom-select" onchange="resetplaceholder()" data-width="100%">
    <option id="lv70" value="lv70">Lv58 - 71</option>
	<option id="lv85" value="lv85" selected>Lv72 - 85 (競技場 88套)</option>
	<option id="lv90" value="lv90">Lv86 - 99 (迷宮 88套)</option>
	<option id="lv90r" value="lv90r">Lv90 重鑄</option>
  </select>
</div>
<div class="col-12 col-sm-2 ">  
  <div class="grid-label font-weight-bold" id="label-gear-type">裝備稀有度</div>
  <select id="gear-type" name="gear-type"  class="custom-select" onchange="resetplaceholder()" data-width="100%">
    <option id="gwhite" value="gwhite" style="color:BLACK; font-weight: bold;">一般</option><!-- 一般 白 -->
	<option id="gblue" value="gblue" style="color:BLUE; font-weight: bold;">稀有</option> <!-- 稀有 藍 -->
	<option id="gpink" value="gpink" style="color:HOTPINK; font-weight: bold;" selected>英雄</option> <!-- 英雄 粉紅 -->
	<option id="gred" value="gred" style="color:RED; font-weight: bold;">傳說</option> <!-- 傳說 紅 --> 
  </select>
</div>
<div class="col-12 col-sm-2 ">  
  <div class="grid-label font-weight-bold" id="label-gear-enc-lv">裝備强化程度</div>
  <select id="gear-enc-lv" class="custom-select" onchange="resetplaceholder()" name="gear-enc-lv" data-width="100%">
    <option id="g0" value="gear-lv0" selected>+0+1+2</option>
    <option id="g3" value="gear-lv3">+3+4+5</option>
    <option id="g6" value="gear-lv6">+6+7+8</option>
	<option id="g9" value="gear-lv9">+9+10+11</option>
	<option id="g12" value="gear-lv12">+12+13+14</option>
	<option id="g15" value="gear-lv15">+15</option>
  </select>
</div>
<div class="col-12 col-sm-6 ">
  <div class="row">
  <div class="col-6 col-sm-4">
  <div class="grid-label font-weight-bold" id="label-sub-presets">有效屬性預設值</div>
  <select id="gear-sub-presets" class="custom-select" name="gear-sub-presets" onchange="setGearUsefulSub()" data-width="100%">
    <option id="gus-all"   value="gus-all" selected>全選</option>
    <option id="gus-dd"   value="gus-dd">純輸出</option>
    <option id="gus-tank"   value="gus-tank">坦克</option>
    <option id="gus-debuffer"   value="gus-debuffer">debuff手</option>
    <option id="gus-healer"   value="gus-healer">奶媽</option>
  </select>
   </div> 
  <div class="col-6 col-sm-8">
  <div class="grid-label font-weight-bold" id="label-usef-sub">有效屬性</div>
  <select id="gear-usef-sub" class="selectpicker" multiple name="gear-usef-sub" data-width="100%">
    <option id="gus-atkper"   value="gus-atkper" selected>攻擊力%</option>
    <option id="gus-defper"   value="gus-defper" selected>防禦力%</option>
    <option id="gus-hpper"    value="gus-hpper"  selected>生命力%</option>
	<option id="gus-atkflat"  value="gus-atkflat" selected>攻擊力</option>
	<option id="gus-defflat"  value="gus-defflat" selected>防禦力</option>
	<option id="gus-hpflat"   value="gus-hpflat"  selected>生命力</option>
    <option id="gus-critch"   value="gus-critch"  selected>暴擊率</option>
    <option id="gus-critdmg"  value="gus-critdmg" selected>暴擊傷害</option>
    <option id="gus-spd"      value="gus-spd"    selected>速度</option>
    <option id="gus-eff"      value="gus-eff"    selected>效果命中</option>
    <option id="gus-res"      value="gus-res"     selected>效果抗性</option> 
  </select>
   </div> 
  </div>  
</div>  
</div>
<div class="grid-container">

  <div class="grid-label font-weight-bold" id="label-atkper">攻擊力百分比</div>
  <div class="grid-label font-weight-bold" id="label-hpper">生命力百分比</div> 
  <div class="grid-label font-weight-bold" id="label-eff">效果命中</div>
  <input type="number" class="form-control" id="atkper" min="0" max="48" placeholder="">
  <input type="number" class="form-control" id="hpper" min="0" max="48" placeholder="">
  <input type="number" class="form-control" id="eff" min="0" max="48" placeholder="">
  
  <div class="grid-label font-weight-bold" id="label-atkflat">攻擊力數值</div>
  <div class="grid-label font-weight-bold" id="label-hpflat">生命力數值</div> 
  <div class="grid-label font-weight-bold" id="label-res">效果抗性</div>
  <input type="number" class="form-control" id="atkflat" min="0" max="282" placeholder="">
  <input type="number" class="form-control" id="hpflat" min="0" max="1200" placeholder="">
  <input type="number" class="form-control" id="res" min="0" max="48" placeholder="">
    
  
  <div class="grid-label font-weight-bold" id="label-critch">暴擊率</div> 
  <div class="grid-label font-weight-bold" id="label-defper">防禦力百分比</div>
  <div class="grid-label font-weight-bold" id="label-spd">速度值</div>   
  <input type="number" class="form-control" id="critch" min="0" max="48" placeholder="">
  <input type="number" class="form-control" id="defper" min="0" max="48" placeholder="">
  <input type="number" class="form-control" id="spd" min="0" max="24" placeholder="">

  <div class="grid-label font-weight-bold" id="label-critdmg">暴擊傷害</div>
  <div class="grid-label font-weight-bold" id="label-defflat">防禦力數值</div>
  <div class="grid-label font-weight-bold" id="label-score">裝備分數</div>
  <input type="number" class="form-control" id="critdmg" min="0" max="48" placeholder="">
  <input type="number" class="form-control" id="defflat" min="0" max="198" placeholder="">
  <div class="grid-result" id="score">0</div>
  
  <button type="button" class="btn btn-success text-center align-middle font-weight-bold" id="btn-calc" onclick="calc()">計算</button>
  <button type="button" class="btn btn-danger text-center align-middle font-weight-bold" id="btn-reset" onclick="reset()">重置</button>
  <div class="grid-result" id="score-percentage" >0%</div>
  <div></div>
  
  <div class="grid-error" id="errmsg"></div>
</div>
</body>
</html>